<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="200px">
        <el-menu
          :router="true"
          default-active="2"
          class="el-menu-vertical-demo"
          background-color="rgb(168, 169, 169)"
          text-color="#fff"
          @open="handleOpen"
          @close="handleClose"
        >
          <template v-for="item in menudata">
            <el-menu-item v-if="!item.children" :index="item.path">
              <el-icon>
                <HomeFilled />
              </el-icon>
              {{ item.label }}
            </el-menu-item>
            <el-sub-menu v-else :index="item.id" :key="item">
              <template #title>
                <el-icon>
                  <Menu />
                </el-icon>

                <span>{{ item.label }}</span>
              </template>
              <el-menu-item
                v-for="sonItem in item.children"
                :index="sonItem.path"
                :key="sonItem"
              >
                <el-icon>
                  <StarFilled />
                </el-icon>
                {{ sonItem.label }}</el-menu-item
              >
            </el-sub-menu>
          </template>
        </el-menu>
      </el-aside>

      <el-container>
        <el-header class="bu">
          <span> 后台管理系统</span
          ><el-popconfirm title="你确定退出登录吗?" @confirm="etitFn">
            <template #reference>
              <el-button type="primary">欢迎您：{{ username }}</el-button>
            </template>
          </el-popconfirm></el-header
        >
        <el-avatar
          :size="40"
          src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
        >
        </el-avatar>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang='ts'>
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from "@element-plus/icons-vue";
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";

import getMenus from "../../grants/menudata";
import getRoutes, { clearCurrentRoutes } from "../../grants/router";
import { useRouteStore } from "../../piniaStore/index";
// getRoutes();
const menudata = reactive(getMenus());
const routeStore = useRouteStore();
if (!routeStore.isAddRoute) {
  getRoutes();
}
const $router = useRouter();
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
const username = ref(sessionStorage.getItem("username"));

const etitFn = () => {
  sessionStorage.clear();
  clearCurrentRoutes();
  routeStore.setIsAddRoute(false);
  $router.push("/login");
};
</script>

<style scoped>
.common-layout {
  width: 100%;
  height: 100%;
}

.el-container {
  width: 100%;
  height: 100%;
}

.el-aside {
  width: 200px;
  height: 100%;
  background-color: rgb(168, 169, 169);
}
.el-menu {
  background-color: rgb(168, 169, 169);
}
.el-avatar {
  position: fixed;
  top: 30px;
  left: 220px;
}
.bu {
  width: 100%;
  height: 100px;
  background-image: url("https://img0.baidu.com/it/u=1292369528,3266513592&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=237");
  text-align: center;
  line-height: 80px;
  font-weight: bold;
  font-size: 25px;
  color: #fff;
  letter-spacing: 20px;
}
.bu .el-button {
  position: fixed;
  left: 270px;
  top: 35px;
  width: 140px;
  height: 35px;
  background-color: #fff;
  color: black;
  border: none;
  border-radius: 10px;
}
</style>